<template>
	<view class="comment-container">
		<nav-bar title="技师详情"></nav-bar>
		<!-- 单条评价 -->
		<view v-for="(item, index) in comments" :key="index" class="comment-card">
			<!-- 评分 -->
			<view class="rating">
				<image v-for="n in 5" :key="n" :src="n <= item.overallRating ? filledStar : emptyStar" class="star" />
			</view>
			<!-- 内容 -->
			<text class="content">{{ item.commentContent }}</text>
			<!-- 项目名称 -->
			<text class="project">{{ item.project.projectName }}</text>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				filledStar: '/static/star-filled.svg',
				emptyStar: '/static/star-empty.svg',
				comments: []
			}
		},
		onLoad(options) {
			this.getList(options.techId)
		},
		methods: {
			getList(techId) {
				uni.request({
					url: `${uni.$config.baseUrl}/comments/comments/listAll`,
					method: 'GET',
					data: {
						technicianId: techId,
						auditStatus: 2,
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data && res.data.code === 200) {
							// 检查返回的列表中是否包含当前技师
							this.comments = res.data.rows || []
						}
					},
					fail: (err) => {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment-container {
		padding-bottom: 40rpx; // 为底部留空隙
	}

	.comment-card {
		background: #ffffff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.rating {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.star {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
	}

	.content {
		display: block;
		font-size: 32rpx;
		color: #333333;
		line-height: 1.5;
		margin-bottom: 16rpx;
	}

	.project {
		display: block;
		font-size: 28rpx;
		color: #999999;
	}
</style>